<template>
	<view class="content">
		<view style="width: 100%;overflow: scroll;">
			<u-swipe-action :show="item.show" :index="index" 
				v-for="(item, index) in DataList" :key="item.id" 
				@click="clicks" @open="open"
				:options="options"
			>
				<view class="itemdsb" @click.stop="radioChange(index)">
				<!-- <view class="itemdsb u-border-bottom"> -->
					<view class="items">
						<view class="item-nik">
							<view class="item-img"><image :src="item.avatar" mode="aspectFill"></image></view>
							<view class="item-data">
								<view class="item-data-title">{{ item.name }}</view>
								<view class="item-data-icon">
									<span v-if="item.sex == 0"><u-icon name="woman" color="#FF8080" size="28"></u-icon></span>
									<span style="background-color: rgba(0, 149, 255, 0.08);" v-else><u-icon name="man" color="#0095FF" size="25"></u-icon></span>
									<span>{{ item.typeName?item.typeName:'暂无' }}</span>
									<span>{{ item.age ? item.age : 0 }}岁</span>
								</view>
								<view class="item-data-content">{{ item.sign ? item.sign : '这家伙很懒，什么都没留下' }}</view>
							</view>
							<view class="item-checked">
								<u-radio-group style="margin-left: 80rpx;z-index: 10000;" size="45" v-model="value">
									<u-radio 
										active-color="#FFCC00" 
										:name="item.name"
										:disabled="item.disabled"
									>
									</u-radio>
								</u-radio-group>
							</view>
						</view>
					</view>
				</view>
			</u-swipe-action>
		</view>
		<view class="nonempty" v-if="DataList.length == 0">
			<span>你还没有宠物</span>
			<span>快去添加吧~</span>
		</view>
		<view class="button">
			<u-button type="primary" class="styleCss" hover-class="none" shape="circle" v-if="DataList.length < 2" @click="setUrl('addPet/addPet')">添加宠物</u-button>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			show: false,
			DataList: [],
			options: [
				{
					text: '编辑',
					style: {
						backgroundColor: '#007aff'
					}
				},
				{
					text: '删除',
					style: {
						backgroundColor: '#dd524d'
					}
				}
			],
			value: undefined,
			values: undefined,
		};
	},
	onUnload() {
		if(this.value != this.values){
			this.setMain()
		}
	},
	methods: {
		setMain(){
			let pid = ''
			this.DataList.forEach(item=>{
				if(this.value == item.name){
					pid = item.pid
				}
			})
			let self = this
			self.$request(self.commonApi.opsMain+pid,'GET').then(res=>{})
		},
		radioChange(e){
			this.value = this.DataList[e].name
			uni.setStorageSync('petName',this.value)
			uni.navigateBack({
				delta: 1
			})
		},
		setUrl(e){
			uni.navigateTo({
				url: '../addPet/addPet'
			})
		},
		clicks(index, index1) {  //index是列的下标，index1是每行的第下标个按钮
			if(index1 == 1) {
				this.$request(this.commonApi.petDelete+this.DataList[index].pid,'GET').then(res=>{
					uni.showToast({
						title: '删除成功',
						duration:1500,
						icon:'none'
					})
					this.getData();
				})
			} else {
				uni.navigateTo({
					url: '../addPet/addPet?id='+this.DataList[index].id+'&pid='+this.DataList[index].pid
					// url: './addPet/addPet?id='+this.DataList[index].id+'&pid='+this.DataList[index].pid
				})
			}
		},
		// 如果打开一个的时候，不需要关闭其他，则无需实现本方法
		open(index) {
			// 先将正在被操作的swipeAction标记为打开状态，否则由于props的特性限制，
			// 原本为'false'，再次设置为'false'会无效
			this.DataList[index].show = true;
			this.DataList.map((val, idx) => {
				if(index != idx) this.DataList[idx].show = false;
			})
		},
		getData() {
			const uid = uni.getStorageSync('uid');
			let self = this
			self.$request(self.commonApi.petList + uid, 'GET', {}).then(res => {
				self.DataList = res.data.data;
				self.DataList.forEach(item=>{
					item.show = false
					item.disabled = false
					if(item.main == 1){
						self.value = item.name
						self.values = item.name
					}
				})
			});
		}
	},
	onShow() {
		this.getData();
	}
};
</script>

<style lang="scss" scoped>
	.styleCss{
		width: 660rpx;
	}
	.button /deep/ .u-btn--primary{
		background: #FFCC00;
	}
	.button{
		width: 100%;
		display: flex;
		justify-content: center;
		position: absolute;
		bottom: 0;
		left: 0;
		height: 140rpx;
		z-index: 1;
	}
.loaction-img{
		width: 50rpx !important;
		height: 46rpx !important;
		margin-right: 20rpx !important;
		flex: 1 !important;
	}
	.loaction {
		padding: 5px 8px;
		display: flex;
		align-items: center;
		flex-direction: row;
		position: absolute;
		z-index: 1;
		top: 92rpx;
		left: 10px;
		border-radius: 20px;
		image{
			width: 50rpx !important;
			height: 46rpx !important;
			margin-right: 20rpx !important;
			flex: 1 !important;
		}
	}
	.top-title {
		width: 100%;
		height: 180rpx;
		display: flex;
		align-items: center;
		background: white;
		flex-direction: row;
		border-bottom: 1px solid #F6F6F6;
		padding-bottom: 180rpx;
		position: relative;
	}
	.popup-text{
		position: absolute;
		display: flex;
		align-items: center;
		justify-content: space-between;
		flex-direction: row;
		font-size: 28rpx;
		color: #FF9A00;
		padding: 15rpx 25rpx;
		background: #FFF4E0;
		border-radius: 15rpx;
		top: 0;
		left: 20rpx;
		z-index: 2;
	}
	.popup{
		position: relative;
	}
	.triangle-up {
		position: absolute;
		top: -20rpx;
		left: 50rpx;
		width: 0;
		height: 0;
		border-left: 15rpx solid transparent;
		border-right: 15rpx solid transparent;
		border-bottom: 30rpx solid #FFF4E0;
		z-index: 2;
	}
	.nonempty{
		width: 100%;
		height: 100vh;
		display: flex;
		align-items: center;
		justify-content: center;
		flex-direction: column;
		font-size: 32rpx;
		color: #999999;
		font-weight: bold;
	}
	.item-data-content {
		width: 100%;
		padding: 0 20rpx;
		font-size: 26rpx;
		color: #999999;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 2;
		overflow: hidden;
	}
	.item-data-icon {
		width: 100%;
		padding: 20rpx 20rpx;
		font-size: 24rpx;
		line-height: 36rpx;
		display: flex;
		align-items: center;
		flex-direction: row;
		span:nth-of-type(1) {
			background: rgba(255, 128, 128, 0.08);
			width: 36rpx;
			height: 36rpx;
			border-radius: 2px;
			display: flex;
			justify-content: space-evenly;
		}
		span:nth-of-type(2) {
			background: rgba(255, 154, 0, 0.08);
			height: 36rpx;
			padding: 2rpx 18rpx;
			border-radius: 2px;
			color: #ff9a00;
			font-size: 24rpx;
			margin-left: 20rpx;
		}
		span:nth-of-type(3) {
			background: rgba(131, 86, 243, 0.08);
			height: 36rpx;
			padding: 2rpx 18rpx;
			border-radius: 2px;
			color: #8356f3;
			font-size: 24rpx;
			margin-left: 20rpx;
		}
	}
	.item-data-title {
		width: 100%;
		font-size: 28rpx;
		font-weight: bold;
		color: #333333;
		padding: 0 20rpx;
	}
	.item-img {
		width: 88rpx;
		display: flex;
		justify-content: center;
		position: relative;
		image {
			width: 88rpx;
			height: 88rpx;
			border-radius: 50%;
			position: absolute;
			top: 0;
			left: 0;
		}
	}
	.item-data {
		width: 512rpx;
		display: flex;
		flex-direction: column;
	}
	.item-checked {
		width: 100rpx;
		display: flex;
		align-items: center;
		flex-direction: row-reverse;
	}
	.item-nik {
		width: 700rpx;
		display: flex;
		justify-content: space-between;
		flex-direction: row;
	}
	.items {
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: center;
		padding: 20rpx 0;
		// border-bottom: 1px solid #f6f6f6;
	}
	.itemdsb {
		display: flex;
		padding: 20rpx;
	}
.content {
	width: 100%;
	height: 100vh;
	background: #F9F9F9;
	display: flex;
	flex-direction: column;
	border-top: 1px solid #f6f6f6;
}
</style>
